<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../modules/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../modules/fontawesome/css/all.min.css" />
    <script src="../modules/fontawesome/js/all.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>添加用户</h2>
      <form name="form">
        <div class="mb-3">
          <label class="form-label">用户名</label>
          <input
            type="text"
            data-action="validUsername"
            class="form-control"
            name="username"
            value="demoabc"
          />
          <div class="invalid-feedback" id="validUsername"></div>
        </div>
        <div class="mb-3">
          <label class="form-label">姓名</label>
          <input
            type="text"
            class="form-control"
            name="name"
            data-action="validName"
            value="demo234"
          />
          <div class="invalid-feedback" id="validName"></div>
        </div>
        <div class="mb-3">
          <label class="form-label">密码</label>
          <input
            type="password"
            data-action="validPassword"
            class="form-control"
            name="password"
            value="demo123123"
          />
          <div class="invalid-feedback" id="validPassword"></div>
        </div>
        <div class="mb-3">
          <label class="form-label">确认密码</label>
          <input
            type="password"
            data-action="validPasswordConfirm"
            class="form-control"
            name="passwordConfirm"
            value="demo12"
          />
          <div class="invalid-feedback" id="validPasswordConfirm"></div>
        </div>
        <div class="mb-3">
          <label class="form-label">性别</label>
          <div class="form-check form-check-inline">
            <input
              class="form-check-radio"
              type="radio"
              name="gender"
              value="1"
              checked
            />
            <label class="form-check-label">男</label>
          </div>
          <div class="form-check form-check-inline">
            <input
              class="form-check-radio"
              type="radio"
              value="2"
              name="gender"
            />
            <label class="form-check-label">女</label>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label">邮箱</label>
          <input
            type="text"
            class="form-control"
            name="email"
            data-action="validEmail"
            value="demo123@qq.com"
          />
          <div class="invalid-feedback" id="validEmail"></div>
        </div>
        <div class="mb-3">
          <label class="form-label">手机</label>
          <input
            type="text"
            class="form-control"
            name="phone"
            data-action="validPhone"
            value="18384876555"
          />
          <div class="invalid-feedback" id="validPhone"></div>
        </div>
        <div class="mb-3">
          <label class="form-label">年龄</label>
          <input
            type="number"
            class="form-control"
            name="age"
            data-action="validAge"
            value="19"
          />
          <div class="invalid-feedback" id="validAge"></div>
        </div>
        <div class="mb-3">
          <button type="button" class="btn btn-primary" data-action="saveUser">
            保存
          </button>
          <a class="btn btn-link" href="./users.html">取消</a>
        </div>
      </form>
    </div>
    <script type="module">
      import { on, createUserApi } from "./users.js";

      const methods = {
        validUsername(flag) {
          let value = "";
          let _this = null;
          if (flag === true) {
            _this = document.form.username;
            value = _this.value;
          } else {
            value = this.value;
            _this = this;
          }
          const r = /^[a-z]{2,8}$/.test(value);
          if (r) {
            _this.classList.remove("is-invalid");
            _this.classList.add("is-valid");
          } else {
            _this.classList.remove("is-valid");
            _this.classList.add("is-invalid");
            document.getElementById("validUsername").innerHTML =
              "用户名必须2-8个字符";
          }
          return r;
        },
        validName(flag) {
          let value = "";
          let _this = null;
          if (flag === true) {
            _this = document.form.name;
            value = _this.value;
          } else {
            value = this.value;
            _this = this;
          }
          const r = /^.{2,8}$/.test(value);
          if (r) {
            _this.classList.remove("is-invalid");
            _this.classList.add("is-valid");
          } else {
            _this.classList.remove("is-valid");
            _this.classList.add("is-invalid");
            document.getElementById("validName").innerHTML =
              "姓名必须2-8个字符";
          }
          return r;
        },
        validAge(flag) {
          let value = "";
          let _this = null;
          if (flag) {
            _this = document.form.age;
            value = +_this.value;
          } else {
            value = +this.value;
            _this = this;
          }
          const r = value >= 18 && value < 80;
          if (r) {
            _this.classList.remove("is-invalid");
            _this.classList.add("is-valid");
          } else {
            _this.classList.remove("is-valid");
            _this.classList.add("is-invalid");
            document.getElementById("validAge").innerHTML = "年龄错误";
          }
          return r;
        },
        validPhone(flag) {
          let value = "";
          let _this = null;
          if (flag === true) {
            _this = document.form.phone;
            value = _this.value;
          } else {
            value = this.value;
            _this = this;
          }
          const r = /^(?:(?:\+|00)86)?1\d{10}$/.test(value);
          if (/^(?:(?:\+|00)86)?1\d{10}$/.test(value)) {
            _this.classList.remove("is-invalid");
            _this.classList.add("is-valid");
          } else {
            _this.classList.remove("is-valid");
            _this.classList.add("is-invalid");
            document.getElementById("validPhone").innerHTML = "手机错误";
          }
          return r;
        },
        validEmail(flag) {
          let value = "";
          let _this = null;
          if (flag === true) {
            _this = document.form.email;
            value = _this.value;
          } else {
            value = this.value;
            _this = this;
          }

          const r =
            /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
              value
            );

          if (r) {
            _this.classList.remove("is-invalid");
            _this.classList.add("is-valid");
          } else {
            _this.classList.remove("is-valid");
            _this.classList.add("is-invalid");
            document.getElementById("validEmail").innerHTML = "邮箱错误";
          }
          return r;
        },

        validPassword(flag) {
          let value = "";
          let _this = null;
          if (flag === true) {
            _this = document.form.password;
            value = _this.value;
          } else {
            value = this.value;
            _this = this;
          }

          const r = /^.{8,}$/.test(value);

          if (r) {
            _this.classList.remove("is-invalid");
            _this.classList.add("is-valid");
          } else {
            _this.classList.remove("is-valid");
            _this.classList.add("is-invalid");
            document.getElementById("validPassword").innerHTML = "密码错误";
          }
          return r;
        },
        validPasswordConfirm(flag) {
          let value = "";
          let _this = null;
          if (flag === true) {
            _this = document.form.passwordConfirm;
            value = _this.value;
          } else {
            value = this.value;
            _this = this;
          }

          const r = value === document.form.password.value;

          console.log(r);
          if (r) {
            _this.classList.remove("is-invalid");
            _this.classList.add("is-valid");
          } else {
            _this.classList.remove("is-valid");
            _this.classList.add("is-invalid");
            document.getElementById("validPasswordConfirm").innerHTML =
              "两次密码不一致";
          }
          return r;
        },
      };
      on("input", methods);
      on("click", {
        saveUser() {
          let r = true;
          r = methods.validEmail(true) && r;
          r = methods.validPhone(true) && r;
          r = methods.validUsername(true) && r;
          r = methods.validName(true) && r;
          r = methods.validAge(true) && r;
          r = methods.validPassword(true) && r;
          r = r && methods.validPasswordConfirm(true);

          if (r === false) return;
          const data = new FormData(document.form);
          createUserApi(Object.fromEntries(data.entries()));
        },
      });
    </script>
  </body>
</html>
